<template>
  <div class="fill-height">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">
          <el-icon class="title-icon"><DataBoard /></el-icon>
          监控仪表盘
        </h1>
        <el-space>
          <el-button
            type="primary"
            @click="loadOverviewData"
            :loading="overviewLoading"
          >
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
        </el-space>
      </div>
    </div>

    <!-- 概览统计卡片 -->
    <el-row :gutter="16" class="overview-cards">
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><Cpu /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ overviewData.overallStats?.totalExecutors || 0 }}</div>
            <div class="stat-label">总执行器数</div>
            <div class="stat-trend">
              <span class="trend-label">在线率:</span>
              <span class="trend-value">{{ (overviewData.overallStats?.onlineRate || 0).toFixed(1) }}%</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon online">
            <el-icon><Connection /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ overviewData.overallStats?.onlineExecutors || 0 }}</div>
            <div class="stat-label">在线执行器</div>
            <div class="stat-trend">
              <span class="trend-label">健康:</span>
              <span class="trend-value">{{ overviewData.overallStats?.healthyExecutors || 0 }}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon warning">
            <el-icon><Warning /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ overviewData.overallStats?.totalActiveThreads || 0 }}</div>
            <div class="stat-label">活跃线程数</div>
            <div class="stat-trend">
              <span class="trend-label">运行任务:</span>
              <span class="trend-value">{{ overviewData.overallStats?.totalRunningTasks || 0 }}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon success">
            <el-icon><DataAnalysis /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ (overviewData.overallStats?.averageMemoryUsage || 0).toFixed(1) }}%</div>
            <div class="stat-label">平均内存使用率</div>
            <div class="stat-trend">
              <span class="trend-label">健康率:</span>
              <span class="trend-value">{{ (overviewData.overallStats?.healthRate || 0).toFixed(1) }}%</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 第二行统计卡片 -->
    <el-row :gutter="16" class="overview-cards">
      <el-col :span="6">
        <div class="stat-card secondary">
          <div class="stat-icon secondary">
            <el-icon><Monitor /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ (overviewData.environmentOverview?.avgCpuUsage || 0).toFixed(1) }}%</div>
            <div class="stat-label">平均CPU使用率</div>
            <div class="stat-trend">
              <span class="trend-label">执行器数:</span>
              <span class="trend-value">{{ overviewData.environmentOverview?.totalExecutors || 0 }}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card secondary">
          <div class="stat-icon secondary">
            <el-icon><Histogram /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ overviewData.threadPoolOverview?.totalApps || 0 }}</div>
            <div class="stat-label">应用总数</div>
            <div class="stat-trend">
              <span class="trend-label">数据点:</span>
              <span class="trend-value">{{ overviewData.threadPoolOverview?.dataPoints || 0 }}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card secondary">
          <div class="stat-icon secondary">
            <el-icon><TrendCharts /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ (overviewData.environmentOverview?.avgHeapMemoryUsage || 0).toFixed(1) }}%</div>
            <div class="stat-label">平均堆内存使用率</div>
            <div class="stat-trend">
              <span class="trend-label">系统内存:</span>
              <span class="trend-value">{{ (overviewData.environmentOverview?.avgMemoryUsage || 0).toFixed(1) }}%</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card secondary">
          <div class="stat-icon secondary">
            <el-icon><Warning /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ overviewData.overallStats?.warningExecutors || 0 }}</div>
            <div class="stat-label">警告执行器</div>
            <div class="stat-trend">
              <span class="trend-label">异常:</span>
              <span class="trend-value">{{ overviewData.overallStats?.errorExecutors || 0 }}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 执行器状态分布图表 -->
    <el-row :gutter="16" class="chart-row">
      <el-col :span="12">
        <el-card class="chart-card" header="执行器状态分布">
          <template #header>
            <div class="card-header">
              <span>执行器状态分布</span>
              <el-tag type="info">{{ overviewData.executorRuntime?.statusDistribution?.[0]?.normalCount || 0 }} 正常</el-tag>
            </div>
          </template>
          <v-chart :option="statusDistributionChartOption" style="height: 300px;" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card" header="应用分布">
          <template #header>
            <div class="card-header">
              <span>应用分布</span>
              <el-tag type="info">{{ overviewData.executorRuntime?.appDistribution?.length || 0 }} 个应用</el-tag>
            </div>
          </template>
          <v-chart :option="appDistributionChartOption" style="height: 300px;" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 在线执行器趋势图 -->
    <el-card class="chart-card" header="在线执行器趋势">
      <template #header>
        <div class="card-header">
          <span>在线执行器趋势 (24小时)</span>
          <div class="header-actions">
            <el-date-picker
              v-model="trendDate"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="loadTrendData"
            />
            <el-button
              type="primary"
              size="small"
              @click="loadTrendData"
              :loading="trendLoading"
            >
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </div>
      </template>
      <div v-loading="trendLoading" style="height: 300px;">
        <v-chart :option="onlineTrendChartOption" style="height: 300px;" />
      </div>
    </el-card>

    <!-- 执行器列表 -->
    <el-card class="table-card full-width" header="执行器列表">
      <template #header>
        <div class="card-header">
          <span>执行器列表</span>
          <el-button
            type="primary"
            @click="loadExecutorList"
            :loading="loading"
          >
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </template>

      <el-table
        :data="executorList"
        :loading="loading"
        style="width: 100%"
        row-key="registerKey"
        size="default"
        @row-click="handleRowClick"
        :fit="true"
      >
        <el-table-column prop="registerKey" label="执行器标识" min-width="300" />
        <el-table-column prop="appName" label="应用名称" min-width="250" />
        <el-table-column prop="status" label="状态" min-width="150">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="healthStatus" label="健康状态" min-width="150">
          <template #default="{ row }">
            <el-tag :type="getHealthStatusType(row.healthStatus)">
              {{ row.healthStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="150" fixed="right">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              @click.stop="viewExecutorDetail(row)"
            >
              <el-icon><View /></el-icon>
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  DataBoard, Refresh, Cpu, Connection, Warning, DataAnalysis, View, Monitor, Histogram, TrendCharts
} from '@element-plus/icons-vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart, LineChart, GaugeChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import * as echarts from 'echarts'
import VChart from 'vue-echarts'
import { dashboardApi } from '@/services/api'
import type {
  DashboardOverviewVO, ExecutorListItemVO, ExecutorDetailVO, ExecutorTrendVO,
  OnlineExecutorsTrendVO, ApiResult
} from '@/types/job'

const router = useRouter()

// 注册 ECharts 组件
use([CanvasRenderer, PieChart, BarChart, LineChart, GaugeChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])

// 响应式数据
const loading = ref(false)
const overviewLoading = ref(false)
const overviewData = ref<DashboardOverviewVO>({
  executorRuntime: {
    totalExecutors: 0,
    onlineExecutors: 0,
    offlineExecutors: 0,
    healthyExecutors: 0,
    warningExecutors: 0,
    errorExecutors: 0,
    totalActiveThreads: 0,
    totalRunningTasks: 0,
    averageMemoryUsage: 0,
    averageQueueUsage: 0,
    statusDistribution: [],
    appDistribution: [],
    recentActiveExecutors: []
  },
  threadPoolOverview: {
    totalExecutors: 0,
    totalApps: 0,
    totalActiveThreads: 0,
    totalRunningTasks: 0,
    avgMemoryUsage: 0,
    dataPoints: 0
  },
  environmentOverview: {
    totalExecutors: 0,
    avgCpuUsage: 0,
    avgMemoryUsage: 0,
    avgHeapMemoryUsage: 0
  },
  overallStats: {
    totalExecutors: 0,
    onlineExecutors: 0,
    offlineExecutors: 0,
    healthyExecutors: 0,
    warningExecutors: 0,
    errorExecutors: 0,
    totalActiveThreads: 0,
    totalRunningTasks: 0,
    averageMemoryUsage: 0,
    healthRate: 0,
    onlineRate: 0
  }
})
const executorList = ref<ExecutorListItemVO[]>([])
const trendDate = ref(new Date().toISOString().split('T')[0])
const trendData = ref<OnlineExecutorsTrendVO>({ trendData: [] })
const trendLoading = ref(false)

// 执行器状态分布图表配置
const statusDistributionChartOption = computed(() => {
  const statusData = overviewData.value.executorRuntime?.statusDistribution?.[0] || {
    normalCount: 0,
    warningCount: 0,
    errorCount: 0,
    offlineCount: 0
  }
  
  const total = statusData.normalCount + statusData.warningCount + statusData.errorCount + statusData.offlineCount
  
  return {
    title: {
      text: '执行器状态分布',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function(params: any) {
        const percentage = total > 0 ? ((params.value / total) * 100).toFixed(1) : '0.0'
        return `${params.name}<br/>数量: ${params.value}<br/>占比: ${percentage}%`
      }
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['正常', '警告', '异常', '离线']
    },
    series: [
      {
        name: '执行器状态',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['60%', '50%'],
        data: [
          { 
            value: statusData.normalCount, 
            name: '正常', 
            itemStyle: { color: '#67C23A' } 
          },
          { 
            value: statusData.warningCount, 
            name: '警告', 
            itemStyle: { color: '#E6A23C' } 
          },
          { 
            value: statusData.errorCount, 
            name: '异常', 
            itemStyle: { color: '#F56C6C' } 
          },
          { 
            value: statusData.offlineCount, 
            name: '离线', 
            itemStyle: { color: '#909399' } 
          }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
})

// 应用分布图表配置
const appDistributionChartOption = computed(() => {
  const appData = overviewData.value.executorRuntime?.appDistribution || []
  
  if (appData.length === 0) {
    return {
      title: {
        text: '应用分布',
        left: 'center',
        textStyle: {
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '执行器数量',
          type: 'bar',
          data: [],
          barWidth: '60%'
        }
      ]
    }
  }
  
  return {
    title: {
      text: '应用分布',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function(params: any) {
        const data = params[0]
        return `${data.name}<br/>执行器数量: ${data.value}`
      }
    },
    xAxis: {
      type: 'category',
      data: appData.map(item => item.appName),
      axisLabel: {
        rotate: 45,
        interval: 0
      }
    },
    yAxis: {
      type: 'value',
      min: 0
    },
    series: [
      {
        name: '执行器数量',
        type: 'bar',
        data: appData.map(item => ({
          value: item.executorCount || 0,
          itemStyle: { 
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#409EFF' },
              { offset: 1, color: '#2563EB' }
            ])
          }
        })),
        barWidth: '60%',
        itemStyle: {
          borderRadius: [4, 4, 0, 0]
        }
      }
    ]
  }
})

// 在线执行器趋势图表配置
const onlineTrendChartOption = computed(() => {
  const trend = trendData.value.trendData || []
  
  if (trend.length === 0) {
    return {
      title: {
        text: '在线执行器趋势',
        left: 'center',
        textStyle: {
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '在线执行器数',
          type: 'line',
          data: [],
          smooth: true,
          itemStyle: { color: '#409EFF' }
        }
      ]
    }
  }
  
  const timePoints = trend.map(item => item.timePoint)
  const onlineData = trend.map(item => item.onlineCount)
  const offlineData = trend.map(item => item.offlineCount)
  const totalData = trend.map(item => item.totalCount)
  
  return {
    title: {
      text: '在线执行器趋势 (24小时)',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: function(params: any) {
        let result = `${params[0].name}<br/>`
        params.forEach((param: any) => {
          result += `${param.marker}${param.seriesName}: ${param.value}<br/>`
        })
        return result
      }
    },
    legend: {
      data: ['在线执行器', '离线执行器', '总执行器'],
      top: 30
    },
    xAxis: {
      type: 'category',
      data: timePoints,
      axisLabel: {
        interval: 2,
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: Math.max(...totalData) + 1
    },
    series: [
      {
        name: '在线执行器',
        type: 'line',
        data: onlineData,
        smooth: true,
        itemStyle: { color: '#67C23A' },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
              { offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
            ]
          }
        },
        markPoint: {
          data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' }
          ]
        }
      },
      {
        name: '离线执行器',
        type: 'line',
        data: offlineData,
        smooth: true,
        itemStyle: { color: '#F56C6C' },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(245, 108, 108, 0.3)' },
              { offset: 1, color: 'rgba(245, 108, 108, 0.1)' }
            ]
          }
        }
      },
      {
        name: '总执行器',
        type: 'line',
        data: totalData,
        smooth: true,
        itemStyle: { color: '#409EFF' },
        lineStyle: {
          type: 'dashed'
        }
      }
    ]
  }
})

// 获取状态类型
const getStatusType = (status: string) => {
  switch (status?.toLowerCase()) {
    case 'online':
      return 'success'
    case 'offline':
      return 'info'
    default:
      return 'info'
  }
}

// 获取健康状态类型
const getHealthStatusType = (healthStatus: string) => {
  switch (healthStatus) {
    case 'healthy':
    case '正常':
      return 'success'
    case 'warning':
    case '警告':
      return 'warning'
    case 'error':
    case '异常':
      return 'danger'
    default:
      return 'info'
  }
}

// 加载概览数据
const loadOverviewData = async () => {
  overviewLoading.value = true
  try {
    const response: ApiResult<DashboardOverviewVO> = await dashboardApi.getDashboardOverview()
    if (response.success) {
      overviewData.value = response.data
      // 更新执行器列表为最近活跃的执行器
      if (response.data.executorRuntime?.recentActiveExecutors) {
        executorList.value = response.data.executorRuntime.recentActiveExecutors.map(executor => ({
          registerKey: executor.registerKey,
          appName: executor.appName,
          status: executor.status,
          healthStatus: executor.healthStatus
        }))
      }
      console.log('概览数据加载成功:', response.data)
    } else {
      ElMessage.error('加载概览数据失败: ' + response.message)
    }
  } catch (error) {
    console.error('加载概览数据出错:', error)
    ElMessage.error('加载概览数据出错')
  } finally {
    overviewLoading.value = false
  }
}

// 加载执行器列表
const loadExecutorList = async () => {
  loading.value = true
  try {
    const response: ApiResult<ExecutorListItemVO[]> = await dashboardApi.getAllExecutors()
    if (response.success) {
      executorList.value = response.data
    } else {
      ElMessage.error('加载执行器列表失败: ' + response.message)
    }
  } catch (error) {
    console.error('加载执行器列表出错:', error)
    ElMessage.error('加载执行器列表出错')
  } finally {
    loading.value = false
  }
}

// 加载趋势数据
const loadTrendData = async () => {
  trendLoading.value = true
  try {
    const response: ApiResult<OnlineExecutorsTrendVO> = await dashboardApi.getOnlineExecutorsTrend(trendDate.value)
    if (response.success) {
      trendData.value = response.data
    } else {
      ElMessage.error('加载趋势数据失败: ' + response.message)
    }
  } catch (error) {
    console.error('加载趋势数据出错:', error)
    ElMessage.error('加载趋势数据出错')
  } finally {
    trendLoading.value = false
  }
}

// 处理行点击
const handleRowClick = (row: ExecutorListItemVO) => {
  console.log('点击执行器:', row)
}

// 查看执行器详情
const viewExecutorDetail = (row: ExecutorListItemVO) => {
  router.push(`/executor-detail/${row.registerKey}`)
}

// 页面加载时执行
onMounted(() => {
  loadOverviewData()
  loadTrendData()
})
</script>

<style scoped>
/* 页面布局 */
.fill-height {
  min-height: 100vh;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  width: 100%;
  box-sizing: border-box;
}

/* 页面标题 */
.page-header {
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  display: flex;
  align-items: center;
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title-icon {
  margin-right: 16px;
  font-size: 32px;
  color: #3b82f6;
  filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.3));
}

/* 概览卡片 */
.overview-cards {
  margin-bottom: 24px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 40px 0;
  border-color: transparent #3b82f6 transparent transparent;
  opacity: 0.8;
}

.stat-card.secondary {
  background: rgba(255, 255, 255, 0.9);
}

.stat-icon {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 28px;
  color: #64748b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.stat-icon.online {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #16a34a;
}

.stat-icon.warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #d97706;
}

.stat-icon.success {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #2563eb;
}

.stat-icon.secondary {
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
  color: #7c3aed;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 32px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-label {
  font-size: 16px;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 8px;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trend-label {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
}

.trend-value {
  font-size: 14px;
  color: #3b82f6;
  font-weight: 600;
}

/* 图表行 */
.chart-row {
  margin-bottom: 24px;
}

/* 图表卡片 */
.chart-card {
  margin-bottom: 24px;
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.chart-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #1e293b;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 表格卡片 */
.table-card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.table-card.full-width {
  width: 100%;
  margin: 0;
  padding: 0;
}

.table-card.full-width :deep(.el-card__body) {
  padding: 0;
  width: 100%;
}

/* 现代化表格样式 */
.el-table {
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  background: transparent;
  width: 100% !important;
}

.table-card.full-width .el-table {
  border-radius: 0;
  box-shadow: none;
}

/* 表头样式 */
.el-table :deep(.el-table__header-wrapper) {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.el-table :deep(.el-table__header) {
  background: transparent;
}

.el-table :deep(.el-table__header th) {
  background: transparent !important;
  color: #475569;
  font-weight: 700;
  font-size: 14px;
  padding: 20px 16px;
  border-bottom: 2px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  text-align: left;
  position: relative;
}

.el-table :deep(.el-table__header th:last-child) {
  border-right: none;
}

/* 表格内容样式 */
.el-table :deep(.el-table__body-wrapper) {
  background: transparent;
}

.el-table :deep(.el-table__body tr) {
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* 隔行换色 */
.el-table :deep(.el-table__body tr:nth-child(even)) {
  background: rgba(248, 250, 252, 0.8);
}

.el-table :deep(.el-table__body tr:hover) {
  background: rgba(227, 242, 253, 0.9) !important;
  transform: scale(1.01);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

/* 单元格样式 */
.el-table :deep(.el-table__body td) {
  padding: 20px 16px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.5);
  border-right: 1px solid rgba(226, 232, 240, 0.5);
  font-size: 14px;
  color: #1e293b;
  text-align: left;
  position: relative;
}

.el-table :deep(.el-table__body td:last-child) {
  border-right: none;
}

/* 状态标签样式 */
.el-table :deep(.el-tag) {
  border-radius: 8px;
  font-weight: 600;
  padding: 6px 12px;
  border: none;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-table :deep(.el-tag--success) {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #16a34a;
}

.el-table :deep(.el-tag--warning) {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #d97706;
}

.el-table :deep(.el-tag--danger) {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #dc2626;
}

.el-table :deep(.el-tag--info) {
  background: linear-gradient(135deg, #e0f2fe 0%, #b3e5fc 100%);
  color: #0288d1;
}

/* 按钮样式 */
.el-button {
  border-radius: 8px;
  font-weight: 600;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.el-button--primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.el-button--primary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.el-button--primary:active {
  transform: translateY(0);
}

/* 日期选择器样式 */
.el-date-picker {
  border-radius: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .overview-cards .el-col {
    margin-bottom: 16px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .stat-number {
    font-size: 28px;
  }
  
  .chart-card {
    margin-bottom: 16px;
  }
}
</style>
